<template>
  <div>
    <el-card class="box-card">
      <!-- 分类标题 -->
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="category_title">
          <span class="shutiao">
            <!-- 竖条 -->
          </span>
          <span>网络医院筛查人数</span>
        </div>
        <div style="width: 375px" />
        <div class="category_title">
          <span class="shutiao">
            <!-- 竖条 -->
          </span>
          <span>院内筛查人数</span>
        </div>
        <div style="width: 375px" />
      </div>

      <!-- 分类开始 -->
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <!-- 每个分类容器category_box-->
        <div class="category_box" style="background: #4ca3ff">
          <!-- 横线上半部分 -->
          <div class="total_number_box_top">
            <div>
              <div>
                <span class="content_one">10</span>
                <span class="content_five">(人)</span>
              </div>
              <div>
                <span class="content_two">今日总数量</span>
              </div>
            </div>
            <div>
              <span class="iconfont icon-jinrishuliang total"></span>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="crowd_box">
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
          </div>
        </div>
        <div class="fengexian" />
        <div class="category_box" style="background: #56cda6">
          <!-- 上半部分 -->
          <div class="total_number_box_top">
            <div>
              <div>
                <span class="content_one">10</span>
                <span class="content_five">(人)</span>
              </div>
              <div>
                <span class="content_two">总数量</span>
              </div>
            </div>
            <div>
              <span class="iconfont icon-zongshuliang total"></span>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="crowd_box">
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">10</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
          </div>
        </div>
        <div class="fengexian" />
        <div class="category_box" style="background: #897af4">
          <!-- 上半部分 -->
          <div class="total_number_box_top">
            <div>
              <div>
                <span class="content_one">{{
                  triageSummaryCount.todayTriageCount
                }}</span>
                <span class="content_five">(人)</span>
              </div>
              <div>
                <span class="content_two">今日总数量</span>
              </div>
            </div>
            <div>
              <span class="iconfont icon-jinrishuliang total"></span>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="crowd_box">
            <div>
              <span class="content_four">{{
                triageSummaryCount.todayHighCount
              }}</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">{{
                triageSummaryCount.todayMiddleCount
              }}</span>
              <span class="content_four_inner">(人)中危人群</span>
            </div>
            <div>
              <span class="content_four">{{
                triageSummaryCount.todayLowCount
              }}</span>
              <span class="content_four_inner">(人)低危人群</span>
            </div>
          </div>
        </div>
        <div class="fengexian" />
        <div class="category_box category_box_last" style="background: #f97160">
          <!-- 上半部分 -->
          <div class="total_number_box_top">
            <div>
              <div>
                <span class="content_one">{{
                  triageSummaryCount.totalCount
                }}</span>
                <span class="content_five">(人)</span>
              </div>
              <div>
                <span class="content_two">总数量</span>
              </div>
            </div>
            <div>
              <span class="iconfont icon-zongshuliang total"></span>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="crowd_box">
            <div>
              <span class="content_four">{{
                triageSummaryCount.highCount
              }}</span>
              <span class="content_four_inner">(人)高危人群</span>
            </div>
            <div>
              <span class="content_four">{{
                triageSummaryCount.middleCount
              }}</span>
              <span class="content_four_inner">(人)高中危人群</span>
            </div>
            <div>
              <span class="content_four">{{
                triageSummaryCount.lowCount
              }}</span>
              <span class="content_four_inner">(人)低危人群</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 15px">
      <el-form
        :inline="true"
        label-position="left"
        :model="formInline"
        class="demo-form-inline"
        label-width="68px"
      >
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="7">
            <el-form-item label="时间范围">
              <el-date-picker
                class="timePicker"
                v-model="formInline.timeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名">
              <el-input
                style="width: 180px"
                v-model="formInline.name"
                placeholder="姓名"
              />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="年龄">
              <el-input class="ageInput" v-model="formInline.ageS" />
              <span>至</span>
              <el-input class="ageInput" v-model="formInline.ageE" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="患者编号">
              <el-input v-model="formInline.patientId" placeholder="患者编号" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="dialogVisible = true"
                >高级搜索</el-button
              >
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-dialog
        title="高级搜索"
        custom-class="seniorSeach"
        :visible.sync="dialogVisible"
      >
        <el-form
          :inline="true"
          label-position="left"
          :model="formInline"
          class="demo-form-inline"
          label-width="68px"
          ref="ruleForm"
        >
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="16">
              <el-form-item label="时间范围" prop="timeRange">
                <el-date-picker
                  class="timePicker"
                  v-model="formInline.timeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input
                  style="width: 180px"
                  v-model="formInline.name"
                  placeholder="姓名"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
              <el-form-item label="年龄" prop="ageS">
                <el-input style="width: 80px" v-model="formInline.ageS" />
              </el-form-item>
              <span
                style="
                  display: inline-block;
                  margin-top: 10px;
                  margin-right: 10px;
                "
                >至</span
              >
              <el-form-item prop="ageE">
                <el-input style="width: 80px" v-model="formInline.ageE" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="患者编号" prop="patientId">
                <el-input
                  v-model="formInline.patientId"
                  placeholder="患者编号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
              <el-form-item label="人工评定" prop="triageResult">
                <el-select v-model="formInline.triageResult">
                  <el-option
                    v-for="item in triageResults"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="formInline.sex" style="width: 180px">
                  <el-option
                    v-for="item in sexs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="search">高级搜索</el-button>
        </span>
      </el-dialog>
      <el-tabs type="border-card" id="tabs" @tab-click="switchScreenState">
        <el-row
          style="
            margin-bottom: 15px;
            position: absolute;
            right: 15px;
            top: -34px;
          "
        >
          <el-col style="text-align: right">
            <el-popover placement="left-start" width="150" trigger="click">
              <div class="filter-container">
                <el-checkbox-group v-model="checkboxVal">
                  <el-checkbox
                    v-for="checkbox in checkboxsLabel"
                    :key="checkbox.checkboxVal"
                    :label="checkbox.checkboxVal"
                    >{{ checkbox.theadName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <el-button
                size="mini"
                class="filter-item"
                slot="reference"
                style="margin-right: 10px"
              >
                <span>
                  <svg-icon
                    class-name="funcIcon"
                    icon-class="shaixuanliebiao"
                  />
                </span>
                筛选列
              </el-button>
            </el-popover>
            <el-button
              :loading="downloadLoading"
              class="filter-item"
              size="mini"
              icon="el-icon-download"
              @click="handleDownload"
              >批量导出</el-button
            >
            <el-button
              class="filter-item"
              size="mini"
              type="primary"
              @click="printContent"
            >
              <span>
                <svg-icon class-name="funcIcon" icon-class="print" />
              </span>
              打印
            </el-button>
          </el-col>
        </el-row>
        <el-tab-pane label="筛查中"></el-tab-pane>
        <el-tab-pane label="已筛查"></el-tab-pane>
      </el-tabs>
      <el-table
        ref="multipleTable"
        v-loading.body="loading"
        max-height="500"
        :data="tableData"
        border
        id="out-table"
        :stripe="true"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          fixed="left"
          width="55"
        />
        <el-table-column
          label="序号"
          align="center"
          fixed="left"
          :index="indexMethod"
          type="index"
          width="60"
        ></el-table-column>
        <el-table-column
          v-for="formTheadName in formThead"
          :key="formTheadName.checkboxVal"
          :label="formTheadName.theadName"
        >
          <template slot-scope="scope">{{
            scope.row[formTheadName.checkboxVal]
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="openDetails(scope.row.triageId)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 15px">
        <el-pagination
          background
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="screeningDataTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { parseTime } from "@/utils";
import {
  triageslist,
  hospitalTriageSummaryCount,
} from "@/api/screening-service/screening-list-service";
import { getHospitalId } from "@/utils/auth";

const defaultFormThead = [
  "patientId",
  "name",
  "sex",
  "age",
  "costCat",
  "sys",
  "bloodOxygen",
  "t",
  "r",
  "p",
  "mewsResult",
  "triageResult",
  "greenType",
  "triageToDepartment",
];

export default {
  name: "ScreeningList",
  components: {},
  data() {
    return {
      key: 1, // table key
      downloadLoading: false,
      multipleSelection: [],
      checkboxsLabel: [
        { checkboxVal: "patientId", theadName: "患者编号" },
        { checkboxVal: "name", theadName: "姓名" },
        { checkboxVal: "sex", theadName: "性别" },
        { checkboxVal: "age", theadName: "年龄" },
        { checkboxVal: "costCat", theadName: "费别" },
        { checkboxVal: "sys", theadName: "收缩压" },
        { checkboxVal: "bloodOxygen", theadName: "血氧" },
        { checkboxVal: "t", theadName: "体温" },
        { checkboxVal: "r", theadName: "呼吸" },
        { checkboxVal: "p", theadName: "脉搏" },
        { checkboxVal: "mewsResult", theadName: "MEWS分级" },
        { checkboxVal: "triageResult", theadName: "人工评定" },
        { checkboxVal: "greenType", theadName: "绿通" },
        { checkboxVal: "triageToDepartment", theadName: "患者去向" },
      ],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: [], // 默认表头 Default header
      formInline: {
        timeRange: [],
        name: "",
        patientId: "",
        triageResult: "",
        ageS: "",
        ageE: "",
        sex: "",
      },
      triageResults: [
        {
          label: "显示全部",
          value: "",
        },
        {
          label: "低危",
          value: "1",
        },
        {
          label: "中危",
          value: "2",
        },
        {
          label: "高危",
          value: "3",
        },
      ],
      sexs: [
        {
          label: "显示全部",
          value: "",
        },
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
      triageSummaryCount: {},
      dialogVisible: false,
      page: 1,
      limit: 10,
      loading: false,
      screeningDataTotal: 0,
      tableData: [],
    };
  },
  computed: {},
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.checkboxsLabel.filter((i) =>
        valArr.includes(i.checkboxVal)
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    },
  },
  created() {
    let HOSPITALID = getHospitalId();
    this.search();
    this.formThead = this.checkboxsLabel.filter((item) =>
      this.checkboxVal.includes(item.checkboxVal)
    );
    hospitalTriageSummaryCount(HOSPITALID).then((res) => {
      this.triageSummaryCount = res;
    });
  },
  methods: {
    openDetails(id) {
      this.$router.push({
        path: "/screening/screening-details",
        query: { id },
      });
    },
    search() {
      let params = "",
        timeRange = this.formInline.timeRange
          ? this.formInline.timeRange.join("-")
          : "";
      this.loading = true;
      if (this.dialogVisible) {
        params = {
          ageS: this.formInline.ageS,
          ageE: this.formInline.ageE,
          limit: this.limit,
          name: this.formInline.name,
          page: this.page,
          patientId: this.formInline.patientId,
          sex: this.formInline.sex,
          timeRange: timeRange,
          triageResult: this.formInline.triageResult,
          hospitalId: getHospitalId(),
        };
      } else {
        params = {
          ageS: this.formInline.ageS,
          ageE: this.formInline.ageE,
          limit: this.limit,
          name: this.formInline.name,
          page: this.page,
          patientId: this.formInline.patientId,
          timeRange: timeRange,
          hospitalId: getHospitalId(),
        };
      }
      triageslist(params).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.screeningDataTotal = res.count;
        this.dialogVisible = false;
        this.loading = false;
      });
    },
    reset() {
      this.$refs.ruleForm.resetFields();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.search();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.search();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //切换tab页
    switchScreenState(tab, event) {
      console.log(tab, event);
      this.page = 1;
      this.search();
    },
    indexMethod(index) {
      return (this.page - 1) * this.limit + (index + 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.screeningCount {
  height: 211px;
  .numPeople {
  }
}
.el-checkbox-group .el-checkbox {
  margin-bottom: 10px;
}
.fengexian {
  width: 3px;
  height: 60px;
  background: #f2f2f2;
}
.category_title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  width: 375px;
}
.shutiao {
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 28%;
  background-color: #4380ea;
  vertical-align: middle;
  margin-right: 6px;
}
.category_box {
  padding: 10px;
  height: 123px;
  width: 375px;
  border-radius: 8px;
  color: #fff;
  margin: 4px;
}
.category_box_last {
  margin-right: 0;
}
.content_one {
  font-size: 30px;
}
.content_two {
}
.content_three {
}
.content_four {
  font-size: 24px;
}
.content_four_inner {
  font-size: 14px;
}
.funcIcon {
  margin-right: 5px;
}
.total_number_box_top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
.crowd_box {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
}
.advancedSearch {
  padding: 19px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.total {
  font-size: 30px;
}
#tabs {
  position: relative;
  border-bottom: 0;
}
#tabs >>> .el-tabs__content {
  overflow: visible;
  padding: 0px !important;
}
>>> .seniorSeach {
  width: 44%;
}
.timePicker {
  width: 380px;
}
>>> .ageInput {
  width: 102px;
}
@media screen and (max-width: 1690px) and (min-width: 1348px) {
  .content_one {
    font-size: 20px;
  }
  .content_two {
  }
  .content_three {
  }
  .content_four {
    font-size: 14px;
  }
  .content_four_inner {
    font-size: 12px;
  }
  .content_five {
    font-size: 14px;
  }
  .fengexian {
    width: 3px;
    height: 100px;
    background: #f2f2f2;
  }
  >>> .timePicker {
    width: 325px;
  }
  >>> .ageInput {
    width: 95px;
  }
  >>> .seniorSeach {
    width: 62%;
  }
}
/* @media screen and (max-width: 1360px) {
  .content_one {
    font-size: 30px;
  }
  .content_two {
  }
  .content_three {
  }
  .content_four {
    font-size: 24px;
  }
  .content_five {
    font-size: 14px;
  }
  .content_four_inner {
    font-size: 14px;
  }
  .fengexian {
    width: 3px;
    height: 100px;
    background: #f2f2f2;
  }
  .total {
    font-size: 37px;
  }
  >>>.timePicker{
    width: 325px;
  }
  >>>.ageInput{
    width: 95px;
  }
} */
</style>
<style lang='scss'>
path {
  fill: inherit !important;
}
.el-dialog__header {
  background: #409eff !important;
}
.el-dialog__header {
  .el-dialog__title,
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
</style>
